<template>
  <div class="query-container">
    <h1>订单查询</h1>
    
    <el-card style="max-width: 800px; width: 90%;">
      <el-form>
        <el-form-item label="账号">
          <el-input 
            v-model="account" 
            placeholder="请输入您的账号"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleQuery"
            :loading="loading"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
      
      <div v-if="result" class="order-list">
        <el-card 
          v-for="order in result.data" 
          :key="order.id"
          class="order-card"
        >
          <div slot="header">
            <span>订单号: {{ order.id }}</span>
          </div>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <span style="font-weight: bold;">课程名称: {{ order.name || order.kcname }}</span>
            <span>学校: {{ order.school }}</span>
            <span>平台: {{ order.ptname }}</span>
            <span>状态: {{ order.status }}</span>
            
            <el-progress 
              :percentage="parseInt(order.process)" 
              :status="getProgressStatus(order.process)"
              :stroke-width="10"
              style="margin: 12px 0;"
            />
            
            <span>开始时间: {{ order.courseStartTime }}</span>
            <span>结束时间: {{ order.courseEndTime }}</span>
            <span>考试时间: {{ order.examStartTime }} - {{ order.examEndTime }}</span>
            <span v-if="order.remarks">
              备注: 
              <el-tag type="info" size="small" style="margin-left: 8px;">
                {{ order.remarks.split('（')[0] }}
              </el-tag>
              <el-tag type="warning" size="small" style="margin-left: 4px;">
                {{ order.remarks.split('（')[1].replace('）', '') }}
              </el-tag>
            </span>
          </div>
        </el-card>
        
        <el-empty v-if="result.data === null" description="未查询到订单数据" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { 
  ElButton, 
  ElInput, 
  ElForm, 
  ElFormItem, 
  ElCard,
  ElProgress,
  ElEmpty,
  ElTag
} from 'element-plus'

const account = ref('')
const result = ref(null)
const loading = ref(false)

const handleQuery = async () => {
  if (!account.value) return
  loading.value = true
  result.value = null
  
      try {
        const response = await axios.post('https://x96fdwg5ly.bja.sealos.run/get_dd', {
          username: account.value
        })
      
        // 处理API响应格式
        if (response.data.code === 200 && response.data.originalResponse) {
          result.value = response.data.originalResponse
        } else {
          result.value = {
            code: 1,
            data: null
          }
        }
      } catch (error) {
        console.error('查询失败:', error)
        result.value = {
          code: 1,
          data: null
        }
      } finally {
        loading.value = false
      }
    }

    const getProgressStatus = (progress) => {
      const percent = parseFloat(progress)
  if (percent >= 100) return 'success'
  if (percent >= 70) return 'info'
  if (percent >= 30) return 'warning'
  return 'error'
}
</script>

<style scoped>
.query-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

.order-list {
  margin-top: 20px;
  width: 100%;
}

.order-card {
  margin-bottom: 16px;
}
</style>

<style scoped>
.query-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  min-height: 100vh;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>